<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2017-2018 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div>
    <winery-table *ngIf="inputParameters"
                  [title]="'Input Parameters'"
                  [data]="inputParameters"
                  [columns]="columns"
                  [disableFiltering]="true"
                  [disableButtons]="!sharedData?.currentVersion?.editable"
                  (addBtnClicked)="addInputParam()"
                  (cellSelected)="onInputParameterSelected($event.row)"
                  (removeBtnClicked)="removeInputParameter()">
    </winery-table>
    <winery-table *ngIf="outputParameters"
                  [title]="'Output Parameters'"
                  [data]="outputParameters"
                  [columns]="columns"
                  [disableFiltering]="true"
                  [disableButtons]="!sharedData?.currentVersion?.editable"
                  (addBtnClicked)="addOutputParam()"
                  (cellSelected)="onOutputParameterSelected($event.row)"
                  (removeBtnClicked)="removeOutputParameter()">
    </winery-table>
</div>

<ng-template #addIntParametersModal>
    <winery-modal-header [modalRef]="addIntParametersModalRef" [title]="modalTitle"></winery-modal-header>
    <winery-modal-body>
        <form #parameterForm="ngForm">
            <div class="form-group">
                <label for="parameterName" class="control-label">Name</label>
                <input type="text"
                       class="form-control"
                       id="parameterName"
                       name="parameterName"
                       ngModel
                       #paramName="ngModel"
                       required
                       [wineryDuplicateValidator]="validatorObject">
                <div *ngIf="paramName.errors && (paramName.dirty || paramName.touched)"
                     class="alert alert-danger">
                    <div [hidden]="!paramName.errors.wineryDuplicateValidator">
                        No duplicates allowed!
                    </div>
                    <div [hidden]="!paramName.errors.required">
                        Name is required!
                    </div>
                </div>
                <label for="parameterType" class="control-label">Typ</label>
                <input type="text"
                       class="form-control"
                       id="parameterType"
                       name="parameterType"
                       ngModel
                       #paramType="ngModel"
                       required>
                <div *ngIf="paramType.errors && (paramType.dirty || paramType.touched)"
                     class="alert alert-danger">
                    <div [hidden]="!paramType.errors.required">
                        Type is required!
                    </div>
                </div>
                <span class="help-block">TOSCA v1.0 does not specify any type system here. The content of this field is a string.
            The concrete semantics is left open. The convension is to use the xsd prefix for XML Schema basic types.</span>
                <div class="form-group">
                    <label>
                        <input #required type="checkbox" name="required" autocomplete="off">
                        Required
                    </label>
                </div>
            </div>
        </form>
    </winery-modal-body>
    <winery-modal-footer
        [modalRef]="addIntParametersModalRef"
        (onOk)="modalTitle === 'Input Parameter'
                                ? onAddInputParam(paramName.value, paramType.value, required.checked)
                                : onAddOutputParam(paramName.value, paramType.value, required.checked);"
        [closeButtonLabel]="'Cancel'"
        [okButtonLabel]="'Add'"
        [disableOkButton]="!parameterForm?.form.valid">
    </winery-modal-footer>
</ng-template>

<ng-template #removeElementModal>
    <winery-modal-header [modalRef]="removeElementModalRef" [title]="modalTitle"></winery-modal-header>
    <winery-modal-body>
        <p>
            Are you sure you want to remove <span style="font-weight:bold;">{{ elementToRemove }}</span>?
        </p>
    </winery-modal-body>
    <winery-modal-footer [modalRef]="removeElementModalRef"
                         [closeButtonLabel]="'Cancel'" [okButtonLabel]="'Delete'"
                         [okButtonClass]="'btn-danger'"
                         (onOk)="onRemoveElement()"></winery-modal-footer>
</ng-template>
